<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    hahah 223wwwwwwww
    <button id="btn">选择图片</button>
    <button id="voice">开始录音</button>
    <button id="s_voice">录音停止</button>
    <button id="p_voice">map</button>
    <button id="p_pic">图片预览接口</button>
    <button id="wifi">网络状态</button>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="./node_modules/js-sha1/build/sha1.min.js"></script>
    <script>
        /* 
                1、首先获取Access_token
                https请求方式: GET
        https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxd2668df77c63743c&secret=63733c1ce8c10526536423e9b6b72bf0

        appID      wxd2668df77c63743c
        appsecret  63733c1ce8c10526536423e9b6b72bf0

        返回值：
            {
            "access_token": "13_CUKb2MFHYk6uuXWqyf56aYH-pzGpBQ7CBYfyoGuHSvN6mO8bU1LmriZo5TwUVglImgoqsik-7ngQCTXtg7iMCy6dhnjEWDBnC-IFijB0cXz3sXbrZC1VeRSvqYtjWEBu_guRYS6GUGl8f3rcIFTjACAYVJ",
            "expires_in": 7200
        }


            2、获取 jsapi_ticket
        http://127.0.0.1:5500/%E7%AC%94%E8%AE%B0/index.html#/appendix  中查看接口地址
        用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：
        https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=13_7lKTXyOoubkJ5snv4JuKM-5lRUreqMFOCvdmUVzvp8JtHmxNsS-0KuaQcc7RBaSCZT9tYZKiwigJnEsDNSgKcdKdZNLxXRt7peDxZnKDdi9Zw9a74wimOjdaAMriQNRnX4K6oe7tKSIpLtb_OIEaACAZTP&type=jsapi
                
        返回值：
            {
            "errcode": 0,
            "errmsg": "ok",
            "ticket": "HoagFKDcsGMVCIY2vOjf9nzIuZUD33R0EjPuworI99EYBe8-iyBH6bMZ1mRqn43jfU7cN8sH-fQgDsqsSY9YRA",
            "expires_in": 7200
        }

            3、进行签名的准备
                noncestr="helloworld"
                jsapi_ticket=HoagFKDcsGMVCIY2vOjf9nzIuZUD33R0EjPuworI99G8TFrNKbQTM4coZ7-S489D2H8Ehj3CZb-g8ICYL2YAaw
                timestamp=1414587457
                url=location.href
                    */
        var option = {
            noncestr: "helloworld",
            //
            /* jsapi_ticket: "HoagFKDcsGMVCIY2vOjf9nzIuZUD33R0EjPuworI99HvSB_qu0M6c0-86qD61IENjP2U8u7PbKXz6hAsffv6Qg", */
            jsapi_ticket: "HoagFKDcsGMVCIY2vOjf9nzIuZUD33R0EjPuworI99HvSB_qu0M6c0-86qD61IENjP2U8u7PbKXz6hAsffv6Qg",
            timestamp: 1535251675045,
            url: location.href
        }
        /* 4、将所有参与签名的字段进行ASCII 码排序   .sort() 按照字母进行排序 */
        var sigList = [];
        //将待签名的字段以key=value存入到数组中
        for (var k in option) {
            sigList.push(k.trim() + "=" + option[k]);
        };
        sigList.sort();
        //5、将数组转成key=value&key=value这种字符串
        var sigStr = sigList.join("&");
        //6、对sigStr进行sha1算法加密
        //引入 sha1模块  npm  i  js-sha1  -S
        var signature = sha1(sigStr)

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "wxd2668df77c63743c", // 必填，公众号的唯一标识
            timestamp: option.timestamp, // 必填，生成签名的时间戳
            nonceStr: option.noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，签名生成算法见附录1
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onVoiceRecordEnd',
                'playVoice',
                'onVoicePlayEnd',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            document.getElementById("btn").onclick = function () {
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                        for (var i = 0; i < localIds.length; i++) {
                            var img = new Image();
                            img.src = localIds[i];
                            document.body.appendChild(img);
                        }
                    }
                });
            };
            document.getElementById("voice").onclick = function () {
                wx.startRecord();
            }

            document.getElementById("s_voice").onclick = function () {
                wx.stopRecord({
                    success: function (res) {
                        var localId = res.localId;
                       /*  wx.playVoice({
                            localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                        }); */

                        wx.translateVoice({
                            localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                alert(res.translateResult); // 语音识别的结果
                            }
                        });  
                    }
                });
            };

            document.getElementById("wifi").onclick = function () {
                wx.getNetworkType({
                    success: function (res) {
                        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                        alert(networkType)
                    }
                });
            }

            document.getElementById("p_voice").onclick = function () {
                wx.getLocation({
                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    success: function (res) {
                        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                        var speed = res.speed; // 速度，以米/每秒计
                        var accuracy = res.accuracy; // 位置精度
                        alert(latitude + '---' + longitude + '---' + speed + '---' + accuracy);
                    }
                });
            }
            document.getElementById("p_pic").onclick = function () {
                wx.previewImage({
                    current: '', // 当前显示图片的http链接
                    urls: [
                        'http://img95.699pic.com/photo/50099/8031.jpg_wh300.jpg!/fh/300//quality/90',
                        'http://img95.699pic.com/photo/50018/5359.jpg_wh300.jpg!/fh/300//quality/90',
                        'http://img95.699pic.com/photo/50012/2476.jpg_wh300.jpg!/fh/300//quality/90'
                     ] // 需要预览的图片http链接列表
                });
            }

            /* 分享 */
            wx.onMenuShareTimeline({
                title: '大玲玲', // 分享标题
                link: 'https://music.163.com/#/song?id=346075', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://imgchr.com/i/PbY8pD', // 分享图标
                type:"music",
                dataUrl:"https://music.163.com/#/song?id=346075",
                success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                }
            });
        });

        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    </script>
</body>

</html>